<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${type == 'add' ? '新增' : '修改'}服务`,
			size: '700px',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@confirm="submit"
		:saving="saving"
		@close="reset"
	>
		<el-form :model="form" :rules="rules" ref="form" label-position="top" :disabled="saving">
			<el-form-item>
				<el-card shadow="never">
					<el-row type="flex">
						<el-form-item class="mt-3" prop="picture_url">
							<cl-upload ref="uploads" v-model="form.picture_url" text="服务主图" />
						</el-form-item>
						<cl-flex1 class="pl-2">
							<el-form-item class="mt-2" label="所属事业部" prop="biz_id">
								<cl-select
									v-model="form.biz_id"
									placeholder="请选择"
									style="width: 100%"
									@change="changeBiz"
									filterable
									:disabled="type == 'edit'"
								>
									<el-option
										v-for="item in business"
										:key="item.value"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
							<el-form-item label="名称" prop="si_name">
								<el-input v-model="form.si_name" placeholder="名称" />
							</el-form-item>
						</cl-flex1>
					</el-row>
					<el-divider />
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="服务分类" prop="category">
								<cl-cascader
									style="width: 100%"
									v-model="form.category"
									:options="cateList"
									placeholder="请选择服务分类"
									filterable
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="预约价格" prop="price">
								<el-input
									v-model="form.price"
									@blur="form.price = $event.target.value"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入预约价格"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="服务售价" prop="price_label">
								<el-input
									v-model="form.price_label"
									@blur="form.price_label = $event.target.value"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入服务售价"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="手工费" prop="manual">
								<el-input
									v-model="form.manual"
									@blur="form.manual = $event.target.value"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入手工费"
								/>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="服务时长" prop="lasttime">
								<cl-select
									v-model="form.lasttime"
									placeholder="请选择服务时长"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in lasttimeList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="服务状态" prop="status">
								<cl-select
									v-model="form.status"
									placeholder="请选择服务状态"
									style="width: 100%"
									filterable
								>
									<el-option label="上架" :value="1" />
									<el-option label="下架" :value="2" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="服务标签" prop="tid">
								<template #label>
									服务标签
									<el-button
										type="text"
										icon="el-icon-circle-plus"
										@click="addTag"
									>
										新增标签
									</el-button>
								</template>
								<cl-select
									v-model="form.tid"
									placeholder="请选择服务标签"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in tagList"
										:key="item.id"
										:label="item.tname"
										:value="item.id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<!-- 更多配置 - start -->
			<el-form-item label="更多配置">
				<el-card shadow="never" body-style="padding:15px 20px">
					<el-row type="flex" align="middle">
						<span style="font-size: 14px">是否为预约服务</span>
						<cl-flex1 />
						<el-form-item prop="forbid_cart" style="margin: 0">
							<el-switch
								v-model="form.forbid_cart"
								:inactive-value="0"
								:active-value="1"
							/>
						</el-form-item>
					</el-row>
					<el-divider />
					<el-row type="flex" align="middle">
						<span style="font-size: 14px">是否可以直接购买</span>
						<cl-flex1 />
						<el-form-item prop="is_buy" style="margin: 0">
							<el-switch
								v-model="form.is_buy"
								:inactive-value="2"
								:active-value="1"
							/>
						</el-form-item>
					</el-row>
					<template v-if="type !== 'edit'">
						<el-divider />
						<el-row type="flex" align="middle">
							<span style="font-size: 14px">是否同步创建卡</span>
							<cl-flex1 />
							<el-switch v-model="form.is_create_card" />
						</el-row>
					</template>
					<el-collapse-transition>
						<div v-if="form.is_create_card">
							<el-divider />
							<el-form-item label="卡项标签" prop="tag_id">
								<cl-select
									v-model="form.tag_id"
									placeholder="请选择卡项标签"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in cardTagList"
										:key="'tag' + item.id"
										:value="item.id"
										:label="item.tname"
									/>
								</cl-select>
							</el-form-item>
							<el-table border stripe :data="form.create_card">
								<cl-empty slot="empty" />
								<el-table-column label="卡项名称" min-width="150" align="center">
									<template slot-scope="{ row, $index }">
										<el-form-item
											:prop="`create_card.${$index}.name`"
											:rules="rules.create_card_name"
											:show-message="false"
											:inline-message="true"
										>
											<el-input v-model="row.name" />
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="卡项售价" min-width="100" align="center">
									<template slot-scope="{ row, $index }">
										<el-form-item
											:prop="`create_card.${$index}.price`"
											:rules="rules.create_card_price"
											:show-message="false"
											:inline-message="true"
										>
											<el-input
												v-model="row.price"
												@blur="row.price = $event.target.value"
												oninput="value=value.replace(/[^\d^\.]/g,'')"
											/>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="卡项次数" min-width="100" align="center">
									<template slot-scope="{ row, $index }">
										<el-form-item
											:prop="`create_card.${$index}.count`"
											:rules="rules.create_card_count"
											:show-message="false"
											:inline-message="true"
										>
											<el-input
												v-model.number="row.count"
												@blur="row.count = Number($event.target.value)"
												oninput="value=value.replace(/[^\d]/g,'')"
											/>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column align="center" width="70">
									<template slot-scope="{ $index }">
										<el-button
											icon="el-icon-plus"
											@click="addCreateCard"
											v-if="form.create_card.length == $index + 1"
										/>
										<el-button
											icon="el-icon-minus"
											v-else
											@click="delCreateCard($index)"
										/>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-form-item>
			<el-form-item label="服务详情" prop="description">
				<cl-wang-editor
					ref="description"
					v-model.trim="form.description"
					placeholder="请输入服务详情"
				/>
			</el-form-item>
		</el-form>
		<tag-form ref="tagForm" @confirm="getTagList" />
	</cl-drawer>
</template>

<script>
import TagForm from "./tag-form";

export default {
	components: {
		TagForm
	},
	data() {
		return {
			type: "add",
			saving: false,
			show: false,
			form: {
				dept_id: "*", //所属门店
				category: [],
				f_category: "", //所属大类
				s_category: "", //所属小类
				si_id: undefined,
				biz_id: "", //事业部id
				// bid_name: "", //事业部id
				si_name: "", //服务名称
				price: "", //价格
				price_label: "", //价格标签 原价
				lasttime: 60, //项目持续时长
				shopping_display: 0, //商城展示默认0：展示1：不展示
				picture_url: "", //服务图片
				detail_picture_url: [], //服务详情图片
				description: "", //服务详情
				project_num: "", //项目数
				tid: "", //标签
				status: 1, //状态(1-在售,2-停售)
				manual: "", // 服务手工费
				forbid_cart: 1, // 是否为预约服务
				is_buy: 1, // 是否可以直接购买
				is_create_card: false, //是否同步创建卡
				tag_id: "", //卡项标签
				create_card: [{ name: "", price: "", count: "" }]
			},
			rules: {
				// picture_url: [{ required: true, message: "请上传服务主图" }],
				si_name: [{ required: true, message: "请填写服务名称" }],
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				category: [{ required: true, message: "请选择服务分类" }],
				price: [{ required: true, message: "请填写预约价格" }],
				price_label: [{ required: true, message: "请填写服务售价" }],
				manual: [{ required: true, message: "请填写手工费" }],
				lasttime: [{ required: true, message: "请选择服务时长" }],
				status: [{ required: true, message: "请选择服务状态" }],
				tid: [{ required: true, message: "请选择服务标签" }],
				tag_id: [{ required: true, message: "请选择卡项标签" }],
				create_card_name: [{ required: true, message: "请填写卡项名称" }],
				create_card_price: [{ required: true, message: "请填写卡项售价" }],
				create_card_count: [{ required: true, message: "请填写卡项次数" }]
				// description: [{ required: true, message: "请填写服务详情" }]
			},
			cateList: [], //分类选项
			lasttimeList: [], //时长
			tagList: [], //标签选项,
			cardTagList: [] //卡项标签
		};
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
		this.getLastTime();
	},
	methods: {
		open(type = "add", row = {}) {
			this.show = true;
			this.type = type;
			this.$refs.drawer.create(async () => {
				this.reset();
				this.$nextTick(async () => {
					if (type != "add") {
						await this.getDetail(row);
					}
					this.init();
				});
			});
		},
		init() {
			this.getCateList();
			this.getTagList();
			this.getCardTagList();
		},
		async getDetail(row) {
			const res = await this.$service.service.info({
				si_id: row.si_id,
				biz_id: row.biz_id
			});
			Object.keys(this.form).forEach(k => {
				res[k] != undefined && (this.form[k] = res[k]);
			});
			try {
				this.form.picture_url = res?.picture_url?.join();
			} catch (e) {}
			this.form.category = [res.f_category, res.s_category];
			this.$refs.description.setHtml(res.description);
		},
		async getCardTagList() {
			const { biz_id } = this.form;
			const res = await this.$service.tag.lists({
				page: 1,
				status: "",
				tname: "",
				keyword: "",
				type: 3,
				biz_id,
				pageSize: 20
			});
			let list = res?.lists ?? [];
			// let first = list[0] ?? {};
			this.cardTagList = list;
			// this.form.tag_id = list[0]?.id ?? "";
			// this.form.tag_id = first.id;
		},
		close() {
			this.show = false;
			this.$refs.drawer.close();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { category, create_card, is_create_card, picture_url, ...args } = this.form;
				this.form.f_category = category[0];
				this.form.s_category = category[1];
				let form = {
					...args,
					f_category: category[0],
					s_category: category[1],
					picture_url: picture_url.split(",")
				};
				if (this.type !== "edit" && is_create_card) {
					form.create_card = JSON.stringify(create_card);
				}
				await this.$service.service[this.type == "edit" ? "edit" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$emit("confirm", this.type == "edit" ? false : true);
				this.$message.success(this.type == "add" ? "新增成功" : "修改成功");
				this.close();
			});
		},

		changeBiz(e) {
			this.form.tag_id = "";
			this.form.tid = "";
			this.init();
		},
		async getCateList() {
			const { biz_id } = this.form;
			const res = await this.$service.service.getType({
				type: 1,
				biz_id
			});
			this.cateList = res.map(item => {
				return {
					...item,
					value: item.id,
					label: item.cname,
					children: item.childlist.map(itm => {
						return {
							...itm,
							value: itm.id,
							label: itm.cname
						};
					})
				};
			});
		},
		//时长
		getLastTime() {
			for (let i = 0.5; i <= 8; i += 0.5) {
				this.lasttimeList.push({
					value: i * 60,
					label: i + "小时"
				});
			}
		},
		addTag() {
			this.$refs.tagForm.open("add", { type: 1 });
		},
		//获取标签
		async getTagList() {
			const { biz_id } = this.form;
			this.tagList = [];
			if (!biz_id) return;
			const { lists } = await this.$service.tag.lists({ biz_id, status: 1, type: 1 });
			this.tagList = lists;
		},

		reset() {
			this.$refs.description.clear();
			this.form = {
				tag_id: "",
				dept_id: "*", //所属门店
				category: [],
				f_category: "", //所属大类
				s_category: "", //所属小类
				si_id: undefined,
				biz_id: this.getCurrBiz(), //事业部id
				// bid_name: "", //事业部id
				si_name: "", //服务名称
				price: "", //价格
				price_label: "", //价格标签 原价
				lasttime: 60, //项目持续时长
				shopping_display: 0, //商城展示默认0：展示1：不展示
				picture_url: "", //服务图片
				detail_picture_url: [], //服务详情图片
				description: "", //服务详情
				project_num: "", //项目数
				tid: "", //标签
				status: 1, //状态(1-在售,2-停售)
				manual: "", // 服务手工费
				forbid_cart: 1, // 是否为预约服务
				is_buy: 1, // 是否可以直接购买
				is_create_card: false, //是否同步创建卡
				create_card: [{ name: "", price: "", count: "" }]
			};
			this.$refs.form.resetFields();
		},
		// 增加创建卡
		addCreateCard() {
			this.form.create_card.push({ id: Date.now(), name: "", price: "", count: "" });
		},
		// 减少创建卡
		delCreateCard(idx) {
			this.form.create_card.splice(idx, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {
	.el-divider {
		margin: 20px 0;
		background-color: #ebeef5;
	}
	.el-table {
		.el-form-item {
			margin-bottom: 0 !important;
		}
	}
}
</style>
